{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "manage/manage_base.html" %}
{% set user = request.user %}
{% set organizations = user.organizations %}
{% set active_tab = active_tab|default('collaborators') %}
{% block title %}
  {% trans organization_name=organization.name %}Manage '{{ organization_name }}'{% endtrans %}
{% endblock %}
{# Hide mobile search on manager pages #}
{% block mobile_search %}{% endblock %}
{% block content %}
  <div class="tabs-container">
    {% block breadcrumbs %}
      <nav aria-label="{% trans %}Breadcrumbs{% endtrans %}" class="breadcrumbs">
        <ul>
          <li class="breadcrumbs__breadcrumb">
            <a href="{{ request.route_path('manage.organizations') }}">{% trans %}Your account{% endtrans %}</a>
          </li>
          {# Last breadcrumb can be overriden #}
          {% block breadcrumb %}
            <li class="breadcrumbs__breadcrumb">
              <i class="fa fa-sm fa-sitemap" aria-hidden="true"></i>
              {{ organization.name }}
            </li>
          {% endblock %}
        </ul>
      </nav>
    {% endblock %}
    <div class="vertical-tabs">
      <div class="vertical-tabs__tabs">
        <div class="sidebar-section">{% include "warehouse:templates/includes/manage/manage-organization-menu.html" %}</div>
      </div>
      <div class="vertical-tabs__panel">
        <!-- mobile nav -->
        <a href="{{ request.route_path('manage.organizations') }}"
           class="vertical-tabs__tab vertical-tabs__tab--with-icon vertical-tabs__tab--mobile vertical-tabs__tab--no-top-border">
          <i class="fa fa-arrow-left" aria-hidden="true"></i>
          {% trans %}Back to organizations{% endtrans %}
        </a>
        <div class="vertical-tabs__content">
          <div class="organization-snippet organization-snippet--margin-bottom">
            <h1 class="organization-snippet__title organization-snippet__title--page-title">
              <a href="{{ request.route_path('organizations.profile', organization=organization.name) }}">{{ organization.name }}</a>
            </h1>
            <p class="organization-snippet__description">{{ organization.display_name }}</p>
          </div>
          <!-- mobile nav -->
          {% with mode="mobile" %}
            {% include "warehouse:templates/includes/manage/manage-organization-menu.html" %}
          {% endwith %}
          {% block main %}{% endblock %}
        </div>
        {% block mobile_tabs_bottom %}{% endblock %}
      </div>
    </div>
  </div>
{% endblock %}
